<template>
  <el-row>
    <div class="infinite-list-wrapper" style="overflow:auto">
      <ul
        class="list"
        v-loading="loading"
        element-loading-text="加载更新中。。。"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        v-infinite-scroll="loadmore"
        :infinite-scroll-disabled="disabled" >

      <el-col :span="6" v-for="(item,i) in newList" :key="i" class="">
          <router-link :to="{name:'gooddetail',params:{goodId:item._id}}">
              <el-card class="box-card list-item">
                  <img :src="item.img" alt="">
                  <p>{{item.name}}</p>
                  <br>
                  <p>{{item.price}}---{{item.type.text}}</p>
                  
              </el-card>
          </router-link>
      </el-col>
      </ul>
      <p v-if="loading">疯狂加载中....</p>
      <p v-if="noMore">别翻了,真的没有的....</p>
    </div>
  </el-row>
</template>

<script>
export default {
    props:['typeobj','goods'],
    data(){
        return{
            list:[],
            count:8,
            loading:false,
        }
    },
    computed:{
        noMore(){
            return this.count >= this.list.length;
        },
        disabled(){
            return this.loading || this.noMore
        },
        newList(){
            return this.list.slice(0,this.count);
        }
    },
    methods:{
        loadmore(){
            this.loading = true;
            setTimeout(() => {
                this.count += 3;
                this.loading = false
            }, 1200);
        }
    },
    mounted(){
        this.list = this.goods.filter(item=>item.type.value == this.typeobj.value)
    }

}
</script>


<style lang="scss" scoped>
.list-item{
    margin:10px 5px;
    img{
        width:100%;
        height:240px;
    }
    p{
        width:100%;
        height:30px;
        line-height: 20px;
        margin-top:10px;
        color:darkorange;
    }
}
.ptips{
    width:100%;
    text-align: center;
}
</style>